<style>
    @font-face {
        font-family: brandon-grotesque;
        src: url("/assets/fonts/Brandon-Grotesque-Light.ttf")
    }

    div.myTips {
        font-family: brandon-grotesque;
        font-size: 14px;
        color: #686868;
        text-align: center;
        margin-top: 100px;
    }

    div.myTips h3 {
        font-size: 36px;
    }
</style>

<div class="wrapper-md">
    <div class="container myTips">
        <div class="row">

            <div class="col-md-12" style="padding-left:0px;margin-left: -10px;">
                <div>
                    <h3>
                        {%if tips['type']=='error'%}
                        <i class="fa fa-times icon  text-danger" style="font-size: 80px;"></i>
                        {% else %}
                        <i class="fa fa-check icon text-success" style="font-size: 80px;"></i>
                        {% endif %}

                        {% if tips['message'] %}
                        {{tips['message']}}
                        {% else %}Operation Is completed
                        {% endif %}
                    </h3>
                    <div>
                        The Page Will Redirect After <b id="wait">{%if tips['seconds'] %}{{tips['seconds']}} {% else %} 3 {% endif %}</b> Seconds,
                        Click <a id="href" href='{{tips['redirect']}}'><b>Here</b></a> If Not.
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript">
    (function(){
        var wait = document.getElementById('wait'),href = document.getElementById('href').href;
        var interval = setInterval(function(){
            var time = --wait.innerHTML;
            if(time <= 0) {
                location.href = href;
                clearInterval(interval);
            };
        }, 1000);
    })();
</script>